<div style="margin-bottom: 16px;">
  <button nz-button nzType="primary" [nzLoading]="loading" (click)="loadListData()">刷新</button>
  <button nz-button nzType="primary" [nzLoading]="updateWechatMenuLoading" (click)="updateWechatMenu()">更新微信公众号菜单</button>
</div>
<nz-table #nzTable [nzData]="dataList" [nzLoading]="loading" nzSize="small" nzBordered="true" nzFrontPagination="false"
  nzShowPagination="false">
  <thead (nzSortChange)="sort($event)" nzSingleSort>
    <tr>
      <th width="50px">#</th>
      <th nzShowSort nzSortKey="attributeKey">键</th>
      <th>值</th>
      <th>备注</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of nzTable.data; let index = index;">
      <td width="50px">{{index + 1}}</td>
      <td>{{data.attributeKey}}</td>
      <td>
        <ng-container *ngIf="attributeValueComponentIsDate(data.attributeType); else elseTemplate">
          {{data.attributeValue | date:'yyyy-MM-dd'}}
        </ng-container>
        <ng-template #elseTemplate>
          {{data.attributeValue}}
        </ng-template>
      </td>
      <td>{{data.memo}}</td>
      <td>
        <button nz-button nzType="primary" (click)="showModal(data)">编辑</button>
      </td>
    </tr>
  </tbody>
</nz-table>
<nz-modal nzTitle="编辑" [(nzVisible)]="isVisible" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
  <form nz-form>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">键</nz-form-label>
      <nz-form-control [nzSpan]="18">{{formData.attributeKey}}</nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">类型</nz-form-label>
      <nz-form-control [nzSpan]="18">
        <nz-select [(ngModel)]="formData.attributeType" name="attributeType" (ngModelChange)="attributeTypeChange($event)">
          <nz-option *ngFor="let option of typeOptionData" [nzValue]="option.name" [nzLabel]="option.remark"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">值</nz-form-label>
      <nz-form-control [nzSpan]="18">
        <!-- 输入框 -->
        <input type="text" nz-input [(ngModel)]="formData.attributeValue" name="attributeValue" *ngIf="attributeValueComponentIsInput(formData.attributeType)" />
        <!-- 下拉框 -->
        <nz-select [(ngModel)]="formData.attributeValue" name="attributeValue" nzPlaceHolder="请选择" *ngIf="attributeValueComponentIsSelect(formData.attributeType)">
          <nz-option *ngFor="let option of valueOptionData" [nzValue]="option.name" [nzLabel]="option.remark"></nz-option>
        </nz-select>
        <!-- 日期 -->
        <nz-date-picker [(ngModel)]="localDate" name="localDate" *ngIf="attributeValueComponentIsDate(formData.attributeType)"></nz-date-picker>
        <!-- 文件上传 -->
        <nz-upload nzAction="/system/configs/upload" *ngIf="attributeValueComponentIsUpload(formData.attributeType)"
          nzType="drag" (nzChange)="uploadHandleChange($event)" [nzFilter]="uploadFilters" [nzCustomRequest]="uploadRequest">
          <ng-container *ngIf="formData.attributeValue; else elseAttributeValueTemplate">
            <img [src]="uploadImgUrl" style="max-width:100%;max-height:100%" />
          </ng-container>
          <ng-template #elseAttributeValueTemplate>
            <p class="ant-upload-drag-icon">
              <i nz-icon type="inbox"></i>
            </p>
          </ng-template>
          <p class="ant-upload-text">点击或拖拽文件到此上传</p>
          <p class="ant-upload-hint">只能上传jpg/png文件，且不超过2mb</p>
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">备注</nz-form-label>
      <nz-form-control [nzSpan]="18">
        <input type="text" nz-input [(ngModel)]="formData.memo" name="memo" />
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>